feat: add @modelcontextprotocol/create-mcp-app package by liady · Pull Request #353 · modelcontextprotocol/ext-apps

liady · 2026-01-25T20:37:09Z

Closes #354

Summary

Enable scaffolding new MCP App projects with a single command:

npm create @modelcontextprotocol/mcp-app my-app

Features

Interactive CLI with beautiful UX using @clack/prompts
Two frameworks: React and Vanilla JS
Uses tsx for running the dev server (broader compatibility than bun)
Uses esbuild for bundling server files
Supports command-line flags:
- --framework react|vanillajs - Skip framework selection prompt
Always runs npm install after scaffolding

Package Structure

packages/create-mcp-app/
├── src/           # CLI source code
├── templates/
│   ├── base/      # Shared files (server.ts, main.ts, configs)
│   ├── react/     # React-specific files
│   └── vanillajs/ # Vanilla JS-specific files
├── test/          # E2E scaffold tests
└── dist/          # Compiled CLI

Changes

Add packages/create-mcp-app/ with CLI implementation and templates
Add packages/* to workspaces in root package.json
Add publish-packages job to npm-publish workflow
Update README to reference the new CLI tool
SDK version read dynamically from package.json at runtime
E2E test scaffolds both templates and verifies they build

Testing

# Build the package
npm run build --workspace packages/create-mcp-app

# Run scaffold E2E test (scaffolds + builds both templates)
npm test --workspace packages/create-mcp-app

# Manual test
cd /tmp
node /path/to/ext-apps/packages/create-mcp-app/dist/index.js my-app --framework react
cd my-app && npm run build

Test plan

Package builds successfully
React template scaffolds and builds
Vanilla JS template scaffolds and builds
CLI help displays correctly
E2E scaffold test passes (both templates)
Test with basic-host after merge

🤖 Generated with Claude Code

Enable scaffolding new MCP App projects via `npm create @modelcontextprotocol/mcp-app`. Features: - Interactive CLI with @clack/prompts for beautiful UX - React and Vanilla JS templates included - Uses tsx for broader compatibility (no bun dependency) - Templates include server, UI, and build configuration - Supports --template and --no-install flags Changes: - Add packages/create-mcp-app/ with CLI and templates - Add packages/* to workspaces in root package.json - Add publish-packages job to npm-publish workflow Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

pkg-pr-new · 2026-01-25T20:40:15Z

Open in StackBlitz

@modelcontextprotocol/ext-apps

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/ext-apps@353

@modelcontextprotocol/server-basic-react

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-basic-react@353

@modelcontextprotocol/server-basic-vanillajs

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-basic-vanillajs@353

@modelcontextprotocol/server-budget-allocator

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-budget-allocator@353

@modelcontextprotocol/server-cohort-heatmap

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-cohort-heatmap@353

@modelcontextprotocol/server-customer-segmentation

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-customer-segmentation@353

@modelcontextprotocol/server-map

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-map@353

@modelcontextprotocol/server-pdf

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-pdf@353

@modelcontextprotocol/server-scenario-modeler

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-scenario-modeler@353

@modelcontextprotocol/server-shadertoy

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-shadertoy@353

@modelcontextprotocol/server-sheet-music

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-sheet-music@353

@modelcontextprotocol/server-system-monitor

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-system-monitor@353

@modelcontextprotocol/server-threejs

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-threejs@353

@modelcontextprotocol/server-transcript

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-transcript@353

@modelcontextprotocol/server-video-resource

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-video-resource@353

@modelcontextprotocol/server-wiki-explorer

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-wiki-explorer@353

commit: d15a5a1

- Add Quick Start section to README with npm create command - Add tip callout to quickstart guide for faster project setup Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

jonathanhefner

I left some comments, but I think my biggest qualm is testing. I think we need to be 100% sure that the code we generate works end-to-end. Right now, it looks like the scaffold code isn't being tested nor even type-checked (unless I missed it?).

docs/quickstart.md

packages/create-mcp-app/src/cli.ts

jonathanhefner · 2026-01-27T15:42:40Z

packages/create-mcp-app/src/cli.ts

+
+${pc.bold("Options:")}
+  -t, --template <name>  Template to use (${TEMPLATES.map((t) => t.value).join(", ")})
+  --no-install           Skip npm install


Just curious: what's the use case for this option?

packages/create-mcp-app/src/utils.ts

packages/create-mcp-app/templates/react/src/mcp-app.module.css

packages/create-mcp-app/templates/react/src/mcp-app.tsx

packages/create-mcp-app/templates/react/package.json.tmpl

packages/create-mcp-app/templates/react/tsconfig.json

packages/create-mcp-app/README.md

- Rename --template flag to --framework - Remove --no-install flag (always install deps) - Read SDK_VERSION dynamically from package.json at runtime - Simplify project name validation (filesystem + npm rules only) - Replace get-time example tool with minimal hello stub - Remove __dirname/import.meta.filename hack in server template - Strip scaffold CSS to minimal layout-only styles - Simplify React scaffold to minimal connected component - Fix tsconfig.json to include main.ts in both templates - Add tsconfig.server.json main.ts include for server code - Fix README.md (remove --no-install, basic-host reference) - Remove quickstart.md scaffold tip (tutorial shouldn't shortcut itself) - Add E2E scaffold test that builds both templates end-to-end Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

packages/create-mcp-app/test/scaffold-build.test.mjs

- Rename --template to --framework flag - Dynamically resolve MCP SDK version from installed package - Remove dot/underscore name restriction and regex interpolation concern - Simplify scaffold templates: remove example tool UI, use TODO placeholders - Delete CSS module files, use global.css with host style variables - Switch test from execSync to execFileSync to avoid shell injection - Add separate tsconfig.server.json without DOM libs for server code Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

liady and others added 2 commits January 25, 2026 22:50

docs: add create-mcp-app references to README and quickstart

50ebcd9

- Add Quick Start section to README with npm create command - Add tip callout to quickstart guide for faster project setup Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Merge branch 'main' into feat/create-app

975cb61

liady marked this pull request as ready for review January 25, 2026 21:31

liady requested a review from ochafik January 25, 2026 21:31

ochafik requested review from jonathanhefner and localden January 26, 2026 15:06

jonathanhefner reviewed Jan 27, 2026

View reviewed changes

liady marked this pull request as draft January 29, 2026 20:18

liady and others added 2 commits January 29, 2026 22:23

Merge branch 'main' into feat/create-app

4b6bbee

github-advanced-security bot found potential problems Jan 29, 2026

View reviewed changes

packages/create-mcp-app/test/scaffold-build.test.mjs Fixed Show fixed Hide fixed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Comments

feat: add @modelcontextprotocol/create-mcp-app package#353

feat: add @modelcontextprotocol/create-mcp-app package#353
liady wants to merge 6 commits intomainfrom
feat/create-app

liady commented Jan 25, 2026 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Jan 25, 2026 •

edited

Loading

Uh oh!

jonathanhefner left a comment

Uh oh!

Uh oh!

Uh oh!

jonathanhefner Jan 27, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Comments

Conversation

liady commented Jan 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Features

Package Structure

Changes

Testing

Test plan

Uh oh!

pkg-pr-new bot commented Jan 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jonathanhefner left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

jonathanhefner Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

liady commented Jan 25, 2026 •

edited

Loading

pkg-pr-new bot commented Jan 25, 2026 •

edited

Loading